import React, { Component } from 'react'

import ReactEcharts from 'echarts-for-react';

import request from '../../util/request'

export default class StudentIndex extends Component {
    state = {
        lineOption:{},  //折线图的配置
        barOption: {
            title: {
                text: '今日成绩分布图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['技能', '理论']
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['0-70', '71-80', '81-90', '91-100']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '技能',
                    type: 'bar',
                    data: [10, 20, 30, 20], //技能每个阶段的人数
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '理论',
                    type: 'bar',
                    data: [30, 20,10, 20],//理论每个阶段的人数
                    markPoint: {
                        data: [
                            {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                            {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        }    //柱状图的配置
    }

    componentDidMount(){
        //折线图
        request.get('/api/line').then(res => {
            if(res.code === 1){
                this.setState({
                    lineOption:{
                        title: {
                            text: '本月成绩曲线'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['技能', '理论']
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data.time//时间
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}分'
                            }
                        },
                        series: [
                            {
                                name: '技能',
                                type: 'line',
                                data: res.data.skillArr, //技能成绩
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name: '理论',
                                type: 'line',
                                data: res.data.theoryArr, //理论成绩
                                markPoint: {
                                    data: [
                                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            }
                        ]
                    }
                })
            }
        })

        //柱状图
        request.get('/api/bar').then(res => {
            if(res.code === 1){
                this.setState({
                    barOption: {
                        title: {
                            text: '今日成绩分布图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['技能', '理论']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: ['0-70', '71-80', '81-90', '91-100']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '技能',
                                type: 'bar',
                                data: res.data.skillNum, //技能每个阶段的人数
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name: '理论',
                                type: 'bar',
                                data: res.data.theoryNum,//理论每个阶段的人数
                                markPoint: {
                                    data: [
                                        {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                                        {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    }
                })
            }
        })

    }
    render() {
        let {lineOption,barOption} = this.state;
        return (
            <div>
                学生首页
                {/* 折线图 */}
                <ReactEcharts option={lineOption} />
                {/* 柱状图 */}
                <ReactEcharts option={barOption} />
            </div>
        )
    }
}
